<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>医生列表</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <link rel="stylesheet" href="/lobsteruiframe/weui/css/weui.css" />
    <link rel="stylesheet" href="/lobsteruiframe/weui/css/weuix.css" />
    <script src="/lobsteruiframe/weui/js/zepto.min.js"></script>
    <script src="/lobsteruiframe/weui/js/zepto.weui.js"></script>
    <script src="/lobsteruiframe/weui/js/swipe.js"></script>
    <script src="/lobsteruiframe/weui/js/macy.js"></script>
    <script src="/jslib/lobster.js"></script>
    <script src="/jslib/template-web.js"></script>
    <style>
        .category-top {
            border-bottom: 1px solid #e8e8e8;
            position: fixed;
            left: 0;
            top: 0;
            right: 0;
            z-index: 1;
            background: #F6F6F9
        }
    </style>
</head>

<body ontouchstart>

    <div class="page-hd">
        <div class='weui-header category-top'>
            <div class="weui-search-bar" id="searchBar">
                <form class="weui-search-bar__form" id="searchForm" action="#">
                    <div class="weui-search-bar__box">
                        <i class="weui-icon-search"></i>
                        <input type="search" class="weui-search-bar__input" id="searchInput" placeholder="请输入医生姓名"
                                 >
                        <a href="javascript:" class="weui-icon-clear" id="searchClear"></a>
                    </div>
                    <label class="weui-search-bar__label" id="searchText"
                            style="transform-origin: 0px 0px 0px; opacity: 1; transform: scale(1, 1);">
                            <i class="weui-icon-search"></i>
                            <span>请输入医生姓名</span>
                        </label>
                </form>
                <a href="javascript:" class="weui-search-bar__cancel-btn" id="searchCancel">取消</a>
            </div>
        </div>
    </div>
    <div class="page-bd">
        <div class="weui-panel weui-panel_access" style="margin-top:10px" id="content">
            <div class="weui-panel__bd" id="docList"></div>

        </div>

        <div class="weui-loadmore" id="weui-loadmore">
            <i class="weui-loading"></i>
            <span class="weui-loadmore__tips">正在加载</span>
        </div>
    </div>
    </div>
</body>

</html>

<script>
    lobsterh5.main({
        data: {
            loading: false, //状态标记
            page: 1,
            perPage: 20,
            flag: true,
            searchkey:''
        },
        //初始化页面
        pageload: function () {
            var self = this;
            self.initevent();
            self.initdata();
        },
        initdata() {
            var self = this;
            $("#weui-loadmore").show();
            var data = { "page": self.data.page, "limit": self.data.perPage,"search":self.data.searchkey };
            lobsterh5.GETAPI("tsregister.getDoctorList",data).then(res => {
                if (res.list.length < self.data.perPage) {
                    self.data.flag = false//设置没有数据了标记
                    //$(document.body).destroyInfinite();
                    $("#weui-loadmore").html("没有更多数据了");
                }
               
                var html = template("tpldoctor", { list: res.list });
                $("#docList").append(html);
            }).catch(res=>{
                //$("#weui-loadmore").hide();
            }); 
        }, 
    
        //初始化事件
        initevent: function () {
            var self = this; 

            $('#searchForm').on('submit', function (event) {
                //拦截表单默认提交事件
                event.preventDefault();
                //获取input框的值，用ajax提交到后台
                self.data.searchkey = $('#searchInput').val();
                //if (self.data.searchkey && self.data.searchkey.length > 0) {
                    self.data.page=1;
                    self.data.flag = true;
                    $("#weui-loadmore").html('<i class="weui-loading"></i><span class="weui-loadmore__tips">正在加载</span>');
                    self.inittemp('tpldoctor','docList',[]);
                    self.initdata();
                //}

            });
            
            $(document).on("click", ".todoctorinfo", function (obj) {
                obj.stopPropagation();
                var info = $(this).data("info");
                location.href = "doctorinfo.html?appid="+lobsterh5.GetAppId()+"&doctId=" + info.EmpId + "&deptId=" + info.DeptId;
            });

            //下拉加载数据
            $(document.body).infinite(100).on("infinite", function () {
                if (self.data.loading) return;
                self.data.loading = true;
                setTimeout(function () {
                    self.data.page++;
                    if (self.data.flag) {
                        self.initdata();
                    }
                    self.data.loading = false;
                }, 1000);
            });
             
        },
     
        inittemp(tempid, _id, data) {
            var html = template(tempid, { list: data });
            $("#" + _id).html(html);
        },
        
        
    }, false);

</script>
<script type="text/template" id="tpldoctor">
    {{each list }}

    <a href="javascript:void(0);" class="weui-media-box weui-media-box_appmsg todoctorinfo" data-info="{{$value}}">
        <div class="weui-media-box__hd">
            <img class="weui-media-box__thumb" src="{{$value.HeadImg? $value.HeadImg:'images/doc_chat.png'}}" alt="">
        </div>
        <div class="weui-media-box__bd">
            <h4 class="weui-media-box__title">{{$value.EmpName}}   {{$value.DoctorPost}}</h4>
            <p class="weui-media-box__desc">{{$value.DeptName}}</p>
            <p class="weui-media-box__desc">擅长：{{!$value.Describe?'暂无数据':$value.Describe}}</p>
        </div>
         
    </a> 
    {{/each}}
</script>